<template>
  <div>
    <Form ref="formInline" inline :label-width="65">
      <FormItem label="角色:">
        <Input type="text" v-model="searchData.role_name" />
      </FormItem>
      <Button
        @click="search"
        type="primary"
        icon="ios-search"
        style="margin-left: 10px"
        >搜索</Button
      >
      <showRule name="addRoleBtn">
        <Button
          @click="showAddRoleDrawer(false)"
          type="primary"
          style="margin-left: 10px"
          >添加角色</Button
        >
      </showRule>
    </Form>
    <Table
      row-key="id"
      :columns="columns"
      :data="list"
      border
      :highlight-row="true"
      max-height="600"
      size="small"
      stripe
    >
      <template slot-scope="{ row, index }" slot="memberSlot">
        <showRule name="editRoleBtn">
          <Tooltip content="编辑" style="margin-left: 10px" placement="top">
            <Icon
              type="ios-create"
              size="24"
              color="#2d8cf0"
              style="cursor: pointer"
              @click.stop="showAddRoleDrawer(row)"
            />
          </Tooltip>
        </showRule>
        <!-- <showRule name="delRoleBtn">
                    <Tooltip content="删除" style="margin-left: 10px;" placement="top">
                        <Icon type="md-trash" size="24" color="red" style="cursor: pointer;"
                            @click.stop="delRole(row.id)" />
                    </Tooltip>
                </showRule> -->
        <showRule name="editRuleBtn">
          <Tooltip content="权限管理" style="margin-left: 10px" placement="top">
            <Icon
              type="md-build"
              size="24"
              color="green"
              style="cursor: pointer"
              @click="editRoleRule(row)"
            />
          </Tooltip>
        </showRule>
      </template>
    </Table>
    <br />
    <!-- <paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
        </paginate> -->
    <Drawer title="角色信息" :closable="false" width="40" v-model="showAdd">
      <Form
        ref="formValidate"
        :model="roleInfo"
        :rules="ruleInline"
        :label-width="100"
      >
        <FormItem label="上级角色">
          <Select v-model="roleInfo.pid" filterable>
            <Option v-for="item in roleList" :value="item.id" :key="item.id">{{
              item.role_name
            }}</Option>
          </Select>
        </FormItem>
        <FormItem label="角色名称" prop="role_name">
          <Input v-model="roleInfo.role_name" placeholder="角色名称"></Input>
        </FormItem>
        <FormItem label="角色状态">
          <RadioGroup v-model="roleInfo.is_del">
            <Radio label="0" border>正常</Radio>
            <Radio label="1" border>禁用</Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="排序值">
                    <Input v-model="roleInfo.sort" placeholder="排序值" type="number"></Input>
                    <Alert type="warning">排序值由大到小排列</Alert>
                </FormItem> -->
        <FormItem>
          <Button type="primary" @click="submit">提交</Button>
        </FormItem>
      </Form>
    </Drawer>
    <rule ref="ruleRef"></rule>
  </div>
</template>

<script>
import paginate from "@/components/paginate/paginate.vue";
import rule from "./rule";
import _ from "view-design/dist/styles/iview.css";
export default {
  components: {
    paginate,
    rule,
  },
  data() {
    return {
      roleId: 0,
      roleList: [],
      // 列表
      columns: [
        {
          title: "角色名称",
          key: "role_name",
          tree: true,
        },
        // {
        //     title: '排序',
        //     key: 'sort',
        // },
        {
          title: "状态",
          key: "is_del",
          render: function (h, param) {
            let text = param.row.is_del == 0 ? "开启" : "关闭";
            return h("div", text);
          },
        },
        {
          title: "管理",
          key: "make",
          slot: "memberSlot",
          minWidth: 100,
        },
      ],
      // 数据
      list: [],
      total: 0,
      searchData: {
        page: 1,
        limit: 10,
      },
      showAdd: false,
      // 管理信息
      roleInfo: {},
      ruleInline: {
        role_name: [{ required: true, message: "名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    search() {
      this.searchData.page = 1;
      this.getRoleList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getRoleList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getRoleList();
    },
    getRoleList() {
      const param = {
        ...this.searchData,
      };
      this.$axios("/admin/role/getRoleList", param).then((res) => {
        this.list = res;
      });
    },
    // 显示添加角色弹窗
    showAddRoleDrawer(row) {
      if (row) {
        this.roleInfo = { ...row };
        this.roleInfo.is_del = row.is_del + "";
      } else {
        this.roleInfo = {
          id: 0,
          pid: 1,
          sort: 0,
          role_name: "",
          is_del: "0",
        };
      }
      this.$axios("/admin/role/getSelfAndNextRoleList").then((res) => {
        this.roleList = res;
      });
      this.showAdd = true;
    },
    // 添加角色
    submit() {
      if (this.roleInfo.id === 0) {
        this.$axios("/admin/role/add", this.roleInfo).then((res) => {
          this.showAdd = false;
          this.getRoleList();
        });
      } else {
        this.$axios("/admin/role/edit", this.roleInfo).then((res) => {
          this.showAdd = false;
          this.getRoleList();
        });
      }
    },
    delRole(id) {
      this.$axios("/admin/role/del", { id: id }).then((res) => {
        this.getRoleList();
      });
    },
    /**
     * 规则编辑
     */
    editRoleRule(row) {
      this.$refs.ruleRef.showRules(row.id);
    },
  },
  created() {
    // 查询自己管理员
    this.roleId = localStorage.getItem("roleId");
    this.getRoleList();
  },
};
</script>

<style></style>
